<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">我审核的</h1>
		</header>
		<div id="myList" class="mui-content otherContent">
			<div class="search-content searchWrap">
				<label class='searchBtn mui-icon mui-icon-search'></label>
				<input type="search" placeholder="搜索标题" value="" name="search" class="actualInput" v-model="input" ref="type1">
				<span class="mui-icon mui-icon-close cancel" @click="dataShow"></span>
			</div>
			<div class="container">
				<scroller :on-infinite="infinite" ref="my_scroller">
					<ul class="mui-table-view ulList">
						<li class="mui-table-view-cell mui-media" v-for="list in dataList" @click="goDetailList(list.InstanceId,list.Bookmark,list.State,list.UpdateDate)">
							<a taptohref>
								<span class="radius">{{list.CreateUserName}}</span>
								<div class="mui-media-body item-desc">
									{{list.CreateUserName}}的{{list.WorkflowName}}
									<p class="mui-ellipsis">{{getStatus(list.State)}}</p>
									<span class="showTime">{{getDate(list.CreateDate)}}</span>
								</div>
							</a>
						</li>
					</ul>
					<div style="height: 1px;"></div>
				</scroller>
			</div>
			<div v-show="showSearch" class="history" searchHistory>
				<div class="hasContent">
					<p>搜索历史</p>
					<ul class="serachList">
						<li ng-click="searchCode(item.SearchContent)" ng-repeat="item in searchList">
							<a>item.SearchContent</a>
						</li>
					</ul>
					<a class="clear" href="" ng-click="clearHistory()">清空历史记录</a>
					<a class="clear" href="" ng-click="showSearch = false">返回</a>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		myList,
		waitList,
		overList,
		getCurrNode
	} from '@/service/getData';
	import {
		loadFromLocal
	} from '@/service/store';
	export default {
		data() {
				return {
					title: "",
					input: "",
					showSearch: false,
					state: null,
					myUser: loadFromLocal("myUser", "obj"),
					dataList: [],
					hasBack: 0,
					page: 0,
					init: false
				}
			},
			created() {
				this.state = this.$route.params.state;
				let self = this;
				overList({
					userId: self.myUser.userId,
					schoolId: self.myUser.schoolId,
					Title: self.input,
					PageIndex: this.page++,
					PageSize: 10
				}).then((res) => {
					if(res.code == 1 && res.data.length == 10) {
						self.init = true;
						self.$refs.my_scroller.finishInfinite(false)
					} else {
						self.$refs.my_scroller.finishInfinite(true)
					}	
					self.dataList = res.data;
				});
			},
			watch: {
				//实时监听input值的变化
				input: {
					handler: function(val, oldval) {
						this.page = 0;
//						if(val == '' || val.replace(/(^\s*)|(\s*$)/g, "") == '') { //首尾去空格
//							return false;
//						}
						let self = this;
						overList({
							userId: self.myUser.userId,
							schoolId: self.myUser.schoolId,
							Title: self.input,
							PageIndex: self.page++,
							PageSize: 10
						}).then((res) => {
							if(res.code == 1 && res.data.length == 10) {
								self.init = true;
								self.$refs.my_scroller.finishInfinite(false)
							} else {
								self.$refs.my_scroller.finishInfinite(true)
							}	
							self.dataList = res.data;
						});
					},
					deep: true
				},
				$route() {
					location.reload()
//					this.$router.go(0)
				}
			},
			methods: {
				infinite(done) {
					if(!this.init) {
						return false;
					}
					let self = this;
					//数据不满一屏，自动补满
					setTimeout(() => {
						overList({
							userId: self.myUser.userId,
							schoolId: self.myUser.schoolId,
							Title: self.input,
							PageIndex: this.page++,
							PageSize: 10
						}).then((res) => {
							if(res.data != null) {
								if(res.data.length == 10) {
									setTimeout(() => {
										done()
									})
								} else {
									setTimeout(() => {
										self.$refs.my_scroller.finishInfinite(true)
									});
								}
								self.dataList = self.dataList.concat(res.data);
							} else {
								done(true)
							}
						});

					}, 500)
				},
				//搜索
				dataShow(){
					this.input = ""; //清空input中的值
				},
				//转换当前节点状态
				getStatus(state) {
					switch(state) {
						case 0:
							return "审批中";
						case 1:
							return "完成";
						case 2:
							return "已撤销";
							//						case 3:
							//							return "已退回";
						default:
							return "审批中";
					}
				},
				//获取日期
				getDate(date) {
					return new Date(date).Format("yyyy-MM-dd hh:mm")
				},
				//查看详情
				goDetailList(instanceId, bookmark, state, updateDate) {
					let self = this;
					if((state != 0 && state != 2) || updateDate) {
						this.hasBack = 1 //hasBack=0时可撤销 为1不可撤销
					}
					//获取当前流程类型
					getCurrNode({
						InstanceId: instanceId
					}).then((res) => {
						let url = res.data.formUrlMobile.split('&')[0].indexOf('Detail') != -1 ? res.data.formUrlMobile.split('&')[0] : 'Detail' + res.data.formUrlMobile.split('&')[0];
						let person = res.data.formUrlMobile.split('&')[1] == undefined ? "null" : res.data.formUrlMobile.split('&')[1];
						self.$router.push({
							name: url,
							params: {
								instanceId: instanceId,
								bookmark: bookmark,
								state: self.state,
								status: state,
								hasBack: self.hasBack,
								person: person
							}
						})
					});

				},

			}
	}
</script>
<style scoped>
	.mui-table-view-cell:after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    height: 0px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
</style>